<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06-用户管理</title>
    <script src="../js/vue.min.js"></script>
    <script src="../bootstrap/jquery.min.js"></script>
    <script src="../bootstrap/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../bootstrap/bootstrap.min.css">
</head>
<body>
<div class="container">
    <div class="row">
        <h2 class="text-center">添加用户</h2>
        <form class="form-horizontal">
            <div class="form-group">
                <label for="name" class="control-label col-sm-2 col-sm-offset-2">姓 名：</label>
                <div class="col-sm-6">
                    <input type="text" class="form-control" id="name" v-model="user.name" placeholder="请输入姓名">
                </div>
            </div>
            <div class="form-group">
                <label for="age" class="control-label col-sm-2 col-sm-offset-2">年 龄：</label>
                <div class="col-sm-6">
                    <input type="text" class="form-control" id="age" v-model="user.age" placeholder="请输入年龄">
                </div>
            </div>
            <div class="form-group">
                <label for="email" class="control-label col-sm-2 col-sm-offset-2">邮 箱：</label>
                <div class="col-sm-6">
                    <input type="text" class="form-control" id="email" v-model="user.email" placeholder="请输入邮箱">
                </div>
            </div>
            <div class="form-group text-center">
                <input type="button" value="添  加" class="btn btn-primary" v-on:click="addUser">
                <input type="reset" value="重  置" class="btn btn-primary">
            </div>
        </form>
    </div>
    <hr class="">
    <div class="row">
        <table class="table table-bordered table-hover">
            <caption class="h3 text-center text-info">用户列表显示表格</caption>
            <thead>
            <tr>
                <th class="text-center">序号</th>
                <th class="text-center">姓名</th>
                <th class="text-center">年龄</th>
                <th class="text-center">邮箱</th>
                <th class="text-center">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(user1,index) in users" class="text-center">
                <td>{{index+1}}</td>
                <td>{{user1.name}}</td>
                <td>{{user1.age}}</td>
                <td>{{user1.email}}</td>
                <td>
                    <button class="btn btn-danger btn-sm" data-target="#del" data-toggle="modal"
                            v-on:click="nowIndex=index">删除
                    </button>
                </td>

            </tr>
            <tr>
                <td colspan="5" class="text-center">
                    <button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#del"
                            v-on:click="nowIndex=-1">删除所有
                    </button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>

    <!--模态框-->
    <div class="modal fade" id="del">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="text-center">删除</h1>
                    <button class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <h4 class="modal-title" v-show="nowIndex!==-1">确认要删除用户：{{users[nowIndex]?users[nowIndex].name:''}}
                        吗？</h4>
                    <h4 class="modal-title" v-show="nowIndex===-1">确认要删除所有用户吗？</h4>
                </div>
                <div class="modal-footer text-center">
                    <button class="btn btn-primary" data-dismiss="modal">取消</button>
                    <button class="btn btn-primary" data-dismiss="modal" v-on:click="deleteUser">确认</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script>

    let vm = new Vue({
        el: ".container",
        data() {
            return {
                users: [
                    {name: 'tom', age: 24, email: 'tom@itany.com'},
                    {name: 'jack', age: 23, email: 'jack@sina.com'}
                ],
                user: {},
                nowIndex: -1,//当前要删除项的索引
            }
        },
        methods: {
            addUser() {
                this.users.push(this.user);
                this.user = {};
            },
            deleteUser() {
                if (this.nowIndex === -1) {
                    // 删除所有
                    this.users = [];
                } else {
                    this.users.splice(this.nowIndex, 1); //从指定索引位置开始删除，删除一个
                }

            }

        }
    })
</script>
</body>
</html>